<template>
  <el-dialog
    title="礼品详情"
    :visible.sync="dialogVisible"
    width="750px"
    :before-close="handleClose"
    class="gift-detail-dialog"
  >
    <div class="dialog-content" v-loading="loading">

      <el-table
        :data="giftData"
        border
        style="width: 100%;"
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />

        <el-table-column label="商品信息">
          <template slot-scope="scope">
            <div class="product-info-cell">
          <image-show :md5="scope.row.defaultPictureDownloadCode || ''" style="width:40px;height:40px;margin-right: 10px;" />
              <div class="product-details">
                <p class="product-name">{{ scope.row.goodsName }}</p>
                <p class="product-code">{{ scope.row.goodsCode }}</p>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="specifications" label="包装" align="center" width="140" >
        <template slot-scope="scope">
          <div style="text-align: center;">
                {{ scope.row.rowcurrentGoodsUnitType == 2 ? '中包装' : scope.row.rowcurrentGoodsUnitType == 3 ? '大包装' : '最小包装' }}
          </div>
        </template>
      </el-table-column>
        <el-table-column prop="goodsCount" label="数量 / 份" align="center" width="120" />
        <el-table-column prop="takeCount" label="已赠送 / 份" align="center" width="120" />
      </el-table>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import imageShow from '@/components/imageShow'
export default {
  components: {
    imageShow
  },
  props: {
    // 控制弹窗是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 传入的礼品数据（或活动ID，用于加载数据）
    giftList: {
        type: Array,
        default: () => []
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      loading: false,

      // 模拟从父组件或API获取的礼品数据
      giftData: [
        {
          // index 是由 el-table-column type="index" 提供的，这里不需要定义
          productName: '这是商品名称超过一行的一部分...替代',
          productCode: '123654789562',
          package: '最小包装',
          unitCount: '2个',
          sentCount: '100份'
        },
        {
          productName: '这是商品名称超过一行的一部分...替代',
          productCode: '123654789562',
          package: '中包装',
          unitCount: '1件',
          sentCount: '100份'
        },
        {
          productName: '这是商品名称超过一行的一部分...替代',
          productCode: '123654789562',
          package: '大包装',
          unitCount: '1箱',
          sentCount: '100份'
        }
      ]
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val) {
        // 在实际应用中，如果 giftList 是空的，这里应该根据某种ID加载数据
        this.loading = false;
        // if (this.giftList.length === 0) {
        //     this.loadGiftData();
        // } else {
        //     this.giftData = this.giftList;
        // }
      }
    },
    giftList(newVal) {
        // 如果父组件通过 prop 直接传入了数据，则同步
        this.giftData = newVal;
    }
  },
  methods: {
    /**
     * @description 关闭弹窗并通知父组件
     */
    handleClose() {
      // 触发父组件的 update:visible 事件来关闭弹窗
      this.$emit('update:visible', false)
    },

    /**
     * @description 模拟加载礼品数据（如果需要）
     */
    loadGiftData() {
        this.loading = true;
        setTimeout(() => {
            this.loading = false;
            // 模拟数据加载
            this.$message.info('礼品数据加载完毕');
        }, 500);
    }
  }
}
</script>

<style lang="scss" scoped>
.gift-detail-dialog {

  .dialog-content {
    padding: 0 10px;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* 商品信息表格单元格样式 */
  .product-info-cell {
    display: flex;
    align-items: center;
    padding: 5px 0;

    .product-image {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border: 1px solid #EBEEF5;
      flex-shrink: 0;
    }


    .product-details {
      min-width: 0;

      .product-name {
        font-size: 14px;
        color: #303133;
        margin: 0;
        line-height: 1.2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .product-code {
        font-size: 12px;
        color: #909399;
        margin: 4px 0 0 0;
        line-height: 1.2;
      }
    }
  }
}
</style>
